<template>
  <div id="register">
    <el-page-header @back="goBack" content="注册新用户"></el-page-header>
    <header>
      <img src="~@/images/register/logo.png" alt="">
    </header>

    <div class="registerarea">
      <h3>注册新用户
        <div class="login">我有账号，请 <span style="color: red; cursor: pointer" @click="loginClick">登录</span></div>
      </h3>

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="ruleForm.username" :autofocus='true'></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号：" prop="tel">
          <el-input v-model.number="ruleForm.tel"></el-input>
        </el-form-item>
        <!-- <el-form-item label="姓名：" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学号：" prop="sno">
          <el-input v-model.number="ruleForm.sno"></el-input>
        </el-form-item> -->

        <div class="agree">
          <input type="checkbox" name="" id="">同意协议并注册<a href="#"> 《同意用户协议》</a>
        </div>

        <input type="button" value="提交注册" class="btn" @click='registerClick(ruleForm.username, ruleForm.password, ruleForm.tel)'>
      </el-form>

    </div>
  </div>
</template>

<script>
// import axios from 'axios'
import {request} from '@/network/request'

// 定义函数判断是否为格式正确的手机号
function isValidPhone(str) {
  const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
  return reg.test(str)
}

// 手机号验证器所需函数
function validPhone(rule, value, callback) {
  if(!value) {
    callback(new Error('请输入手机号'))
  } else if(!isValidPhone(value)) {
    callback(new Error('请输入正确的11位手机号码'))
  } else {
    callback()
  }
}

export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        tel: '',
        // name: '',
        // sno: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur'},
          { min: 3, max: 10, message: '用户名长度在3到10个字符', trigger: 'change'},
          { min: 3, max: 10, message: '用户名长度在3到10个字符', trigger: 'blur'}
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur'}
        ],
        tel: [
          // { required: true, message: '请输入手机号', trigger: 'blur' },
          // { type: 'number', message: '手机号必须是长度为11位的数字', trigger: 'blur' }
          {  trigger: 'blur', validator: validPhone}
        ],
        // name: [
        //   { message: '请输入姓名', trigger: 'blur'}
        // ],
        // sno: [
        //   { message: '请输入学号', trigger: 'blur'},
        //   { type: 'number', message: '学号必须为数字值'}
        // ],
      }
    };
  },
  methods: {
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       alert('submit!');
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
    goBack() {
      this.$router.go(-1)
    },
    loginClick() {
      if(this.$store.state.isLogin) {
        this.$message({
          message: '您已登录！',
          type: 'warning'
        });
      } else {
        this.$router.push('/login')
      }
    },
    registerClick(username, password, tel) {
      let user = JSON.stringify({
        username,
        password,
        phonenum: tel
      })
      // axios.post('http://192.168.43.152:8555/xiaoyi/user/register', user, {
      //   headers: {
      //     "Content-Type": "application/json;charset=utf-8"  //头部信息
      //   }
      // }).then(res => {
      //   // console.log(res);
      //   if(res.data.flag) {
      //     alert('恭喜您注册成功！')
      //     this.$router.push('/login')
      //   }
      // }).catch(err => {
      //   console.log(err);
      // })

      request({
        url: '/user/register',
        method: 'post',
        data: user
      }).then(res => {
        // console.log(res);
        if(res.data.flag) {
          this.$message({
            message: '恭喜您注册成功！',
            type: 'success'
          });
          this.$router.push('/login')
        } else {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        }
      }).catch(err => {
        console.log(err);
      })

    }
  }
}
</script>

<style scoped>
  #register {
    width: 60%;
    margin: 0 auto;
    /* text-align: center; */
  }

  #register header {
    height: 90px;
    border-bottom: 2px solid #ff0000;
    text-align: initial;
  }

  #register header img {
    padding-top: 10px;
    height: 70px;
  }

  #register .registerarea {
    height: 550px;
    border: 1px solid #ccc;
    margin-top: 20px;
  }

  #register .registerarea h3 {
    height: 42px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;

    font-size: 15px;
    color: #666;
  }

  #register .registerarea .login {
    float: right;
  }

  #register .registerarea .el-form {
    text-align: center;
  }

  #register .registerarea .el-form-item {
    width: 40%;
    margin: 30px auto;
  }

  #register .registerarea .agree {
    color: #666;
    font-size: 15px;
  }

  #register .registerarea .agree a {
    text-decoration: none;
    color: #1ba1e6;
  }

  #register .registerarea .btn {
    width: 200px;
    height: 34px;
    background-color: red;
    color: #fff;
    font-size: 14px;
    margin-top: 30px;
    cursor: pointer;
}
</style>
